<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="admin/lib/html5shiv.js"></script>
    <script type="text/javascript" src="admin/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="admin/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="admin/lib/Hui-iconfont/1.0.8/iconfont.min.css" />
    <!--[if lt IE 9]>
    <link href="admin/static/h-ui/css/H-ui.ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <!--[if IE 6]>
    <script type="text/javascript" src="admin/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>Hi，H-ui</title>
    <style>
        #form-body td{
            min-width: 100px;
        }

        td.text-r{
            width: 100px;
        }


        tr.user_id,
        tr.user_head_img,
        tr.user_head_img_big,
        tr.user_head_img_small,
        tr.user_bg_img,
        tr.user_card_img,
        tr.user_card_img_big,
        tr.user_card_img_small{
            display: none;
        }

        select#province,
        select#city{
            display: inline-block;
            width: 100px;
        }

        div.radio-b{
            margin: 0 15px;
            display: inline-block;!important;
        }

        td.user_sex input{
            margin: 0 15px;
        }

        .btn_group input{
            margin: 0 10px;
        }

        /*.datetimepicker,*/
        /*.table-condensed{*/
            /*width: 260px;*/
            /*height: 220px;*/
        /*}*/
    </style>
</head>
<body class="hui-fadeinR" id="infoBody">
<section class="container">
    <div class="panel panel-default mt-20">
        <div class="panel-header">
            <h4>基本信息</h4>
        </div>
        <div class="panel-body" style="display: block" id="table-body">
            <table class="table table-border table-bordered table-striped mt-20 table-hover" id="table-info">
            </table>
            <div class="row cl" style="text-align: center; margin-top: 15px;">
                <input type="button" value="编辑" class="btn btn-default text-c" style="" id="edit-btn">
            </div>
        </div>
        <div class="panel-body" style="display: none" id="form-body">

            <form action="" method="post" class="form form-horizontal responsive" id="userForm" novalidate="novalidate">
                <table class="table table-border table-bordered table-striped mt-20 table-hover">
                    <tbody>
                    <tr style="display: none">
                        <td class="text-r">昵称：</td>
                        <td>
                            <input type="text" value="" class="input-text" name="user_id" placeholder="请输入昵称！">
                        </td>
                    </tr>
                        <tr>
                            <td class="text-r">昵称：</td>
                            <td>
                                <input type="text" value="" class="input-text" name="user_nickname" placeholder="请输入昵称！">
                            </td>
                        </tr>
                        <tr>
                            <td class="text-r">真实姓名：</td>
                            <td>
                                <input type="text" value="" class="input-text" name="user_name" placeholder="请输入真实姓名！">
                            </td>
                        </tr>
                        <tr>
                            <td class="text-r">所在地：</td>
                            <td>
                                <select name="user_province" id="province" class="">

                                </select>
                                <select name="user_city" id="city" class="">
                                    <option value="" selected></option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-r">性别：</td>
                            <td class="user_sex">
                                <input type="radio" name="user_sex" value="0"><span>男</span>
                                <input type="radio" name="user_sex" value="1"><span>女</span>
                                <input type="radio" name="user_sex" value="2"><span>保密</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-r">性取向：</td>
                            <td>
                                <select name="user_sex_orientation">
                                    <option value="0">女</option>
                                    <option value="1">男</option>
                                    <option value="2">双向</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-r">情感状况：</td>
                            <td>
                                <select name="user_sentiment" id="user_sentiment">
                                    <option value="0">无求</option>
                                    <option value="1">单身</option>
                                    <option value="2">求交往</option>
                                    <option value="3">暗恋中</option>
                                    <option value="4">暧昧中</option>
                                    <option value="5">恋爱中</option>
                                    <option value="6">订婚</option>
                                    <option value="7">已婚</option>
                                    <option value="8">分居</option>
                                    <option value="9">离异</option>
                                    <option value="10">丧偶</option>
                                </select>
                            </td>
                        </tr>
                    <tr>
                        <td class="text-r">生日：</td>
                        <td>
                            <input type="text" class="input-text valid" value="" autocomplete="off" id="datetimepicker" name="user_birthday" aria-required="true" aria-invalid="false" style="width: 250px">
                        </td>
                    </tr>
                        <tr>
                            <td class="text-r">血型：</td>
                            <td>
                                <select name="user_bloodtype" id="user_bloodtype">
                                    <option value="A">A型</option>
                                    <option value="B">B型</option>
                                    <option value="AB">AB型</option>
                                    <option value="O">O型</option>
                                </select>
                            </td>
                        </tr>
                    <tr>
                        <td class="text-r">博客地址：</td>
                        <td>
                            <input type="text" value="" class="input-text" name="user_blog" placeholder="请输入博客地址！">
                        </td>
                    </tr>
                        <tr>
                            <td class="text-r">简介：</td>
                            <td>
                                <textarea name="user_info" id="" style="height:100px;width: 100%;resize: none;"></textarea>
                            </td>
                        </tr>
                    <tr>
                        <td class="text-r">邮箱：</td>
                        <td>
                            <input type="text" value="" class="input-text" name="user_email" disabled>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-r">QQ：</td>
                        <td>
                            <input type="text" value="" class="input-text" name="user_tencent" placeholder="请输入QQ号！">
                        </td>
                    </tr>
                    <tr>
                        <td class="text-r">手机：</td>
                        <td>
                            <input type="text" value="" class="input-text" name="user_phone" placeholder="请输入手机号！">
                        </td>
                    </tr>
                    <tr>
                        <td class="text-r">就职于：</td>
                        <td>
                            <input type="text" value="" class="input-text" name="user_work" placeholder="请输入工作地点！">
                        </td>
                    </tr>
                    <tr>
                        <td class="text-r">毕业于：</td>
                        <td>
                            <input type="text" value="" class="input-text" name="user_school" placeholder="请输入毕业院校！">
                        </td>
                    </tr>
                    
                    </tbody>
                </table>
                <div class="row cl btn_group" style="text-align: center; margin-top: 15px;">
                    <input type="submit" value="保存" class="btn btn-primary" style="" id="save-btn">
                    <input type="button" value="取消" class="btn btn-default" style="" id="cancel-btn">
                </div>
            </form>
        </div>
    </div>
</section>

<!--普通弹出层-->
<div id="modal-show" class="modal fade middle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content radius">
            <div class="modal-header">
                <h3>用户信息</h3>
                <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a> </div>
            <div class="modal-body">
                <div class="panel panel-default mt-20">
                    <div class="panel-header">用户详细信息</div>
                    <div class="panel-body">
                        <table class="table table-border table-bordered table-striped mt-20 table-hover" id="user-info">
                            <thead>
                            <tr>
                                <th class="text-r">类别</th>
                                <th class="text-l">信息</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="panel-footer"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">确定</button>
                <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="admin/lib/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
<script type="text/javascript" src="admin/lib/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="admin/lib/jquery.validation/1.14.0/messages_zh.min.js"></script>
<script type="text/javascript" src="Src/js/city.js" charset="UTF-8"></script>
<script>
    field = {
        user_id : 'ID',
        user_head_img : '头像',
        user_sex : '性别',
        user_nickname : '昵称',
        user_address : '地址',
        user_blog : '博客',
        user_bg_img : '背景',
        user_birthday : '生日',
        user_bowen_count : '微博',
        user_email : '邮箱',
        user_card_img : '明信片',
        user_followed_count : '粉丝',
        user_following_count : '关注',
        user_head_img_big : '头像（大）',
        user_head_img_small : '头像（小）',
        user_info : '简介',
        user_level : '等级',
        user_name : '姓名',
        user_school : '学校',
        user_sentiment : '情感状况',
        user_setting_id : '设置号',
        user_datetime : '注册时间',
        user_password : '密码（MD5）',
        user_phone : '手机',
        user_tencent : 'QQ',
        user_token : '令牌',
        user_work : '工作',
        user_point : '分数',
        user_sex_orientation : '性取向',
        user_card_img_big : '明信片（大）',
        user_card_img_small : '明信片（小）',
        user_city : '城市',
        user_province : '省份',
        user_bloodtype : '血型'
    };

    sexOrientation = {
        '0' : '女',
        '1' : '男',
        '2' : '双向'
    };

    Sentiment = {
        '0' : '无求',
        '1' : '单身',
        '2' : '求交往',
        '3' : '暗恋中',
        '4' : '暧昧中',
        '5' : '恋爱中',
        '6' : '订婚',
        '7' : '已婚',
        '8' : '分居',
        '9' : '离异',
        '10' : '丧偶'
    };
</script>
<script>
    var host = '/';
    var $table = $('#table-info');
    var $city = $('#city');
    var $province = $('#province');

    var $btnEdit = $('#edit-btn');
    var $btnCancel = $('#cancel-btn');
    var $infoPanel = $('#table-body');
    var $editPanel = $('#form-body');
    var $form = $('#userForm');
    window.addEventListener('message',function(e){
        if(e.source!=window.parent) return;
//        console.log(e.data);
        fillDataInTable(e.data);
        fillDataInForm(e.data);
    },false);
    $(function(){
        //console.log(City);
        fillProvince();
        //邮箱提示
        $("#email").emailsuggest({});
        //checkbox 美化
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        //日期插件
        $("#datetimepicker").datetimepicker({
            format: 'yyyy-mm-dd',
            minView: "month",
            todayBtn:  1,
            autoclose: 1,
            endDate : new Date()
        }).on('hide',function(e) {
            //此处可以触发日期校验。
        });

        /*+1 -1效果*/
        $("#spinner-demo").Spinner({value:1, min:1, len:2, max:99});


        //选项卡

        //返回顶部
        $(window).on("scroll",backToTopFun);
        backToTopFun();

        //hover效果
        $.Huihover('.maskWraper');

        //星级评价
        $("#star-1").raty({
            hints: ['1','2', '3', '4', '5'],//自定义分数
            starOff: 'iconpic-star-S-default.png',//默认灰色星星
            starOn: 'iconpic-star-S.png',//黄色星星
            path: 'http://static.h-ui.net/h-ui/images/star',//可以是相对路径
            number: 5,//星星数量，要和hints数组对应
            showHalf: true,
            targetKeep : true,
            click: function (score, evt) {//点击事件
                //第一种方式：直接取值
                $("#result-1").html('你的评分是'+score+'分');
            }
        });

        $province.change(function () {
            provinceChange($(this).val());
        });
        $province.change();

        $btnEdit.click(function () {
            $infoPanel.hide();
            $editPanel.show();
        });

        $btnCancel.click(function () {
            $editPanel.hide();
            $infoPanel.show();
        });

        $form.validate({
            rules:{
                user_nickname : {
                    required : true,
                    minlength : 1
                },
                user_name : {
                    required : true,
                    minlength : 1
                },
                user_school : {
                    required : false,
                    maxlength : 45
                },
                user_work : {
                    required : false,
                    maxlength : 45
                },
                user_birthday : {
                    required : true,
                    dateISO : true
                },
                user_sex : {
                    required : true,
                    digits : true
                },
                user_city : {
                    required : true,
                    digits : true
                },
                user_province : {
                    required : true,
                    digits : true
                },
                user_blog : {
                    required : false,
                    url : true
                },
                user_info : {
                    maxlength : 144
                },
                user_tencent : {
                    minlength : 6,
                    maxlength : 12,
                    digits : true
                },
                user_id : {
                    required : true
                },
                user_sex_orientation : {
                    required : true
                },
                user_phone : {
                    minlength : 7,
                    maxlength : 18
                }
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                updateRequest(form,updateSuccess,updateError);
            }
        });

//        $btnSave = $('#save-btn');
//        $btnSave.click(function () {
//            $(this).addClass('disabled');
//            updateRequest($form[0],updateSuccess,updateError);
//        });
    });
    
    function updateSuccess(data) {
        if(data.status == 200){
            modalalertdemo(data.message);
            fillDataInTable(data.data);
            fillDataInForm(data.data);
            $editPanel.hide();
            $infoPanel.show();
        }
        else{
            modalalertdemo(data.message);
        }
    }
    
    function updateError(XMLHttpRequest, textStatus, errorThrown) {
        console.log(XMLHttpRequest);
        console.log(textStatus);
        console.log(errorThrown);
    }

    function updateRequest(form,fnSuccess,fnError) {
        var data = new FormData(form);
        $.ajax({
            url : host + 'weibo_updateSelfInfo',
            type : 'POST',
            dataType : 'json',
            data: data,
            processData: false,
            contentType: false,
            xhrFields: {
                withCredentials: true
            },
            success : fnSuccess,
            error : fnError
        })
    }

    //弹窗
    function modalshow(){
        $("#modal-show").modal("show");
    }
    //消息框
    function modalalertdemo(msg){
        $.Huimodalalert(msg,2000);
    }

    htmlEncodeByRegExp = function (str) {
        var s = "";
        if (str.length == 0) return "";
        s = str.replace(/&/g, "&amp;");
        s = s.replace(/</g, "&lt;");
        s = s.replace(/>/g, "&gt;");
        s = s.replace(/ /g, "&nbsp;");
        s = s.replace(/\'/g, "&#39;");
        s = s.replace(/\"/g, "&quot;");
        return s;
    };

    fillDataInTable = function (data) {
        $table.children().remove();
        var $tbody = $('<tbody></tbody>');
        for(var key in data){
            var info = data[key] == null ? '' : data[key];
            info = htmlEncodeByRegExp(info.toString());
            var $tr = $('<tr class="'+key+'"><td class="text-r">'+field[key]+'：</td><td>'+info+'</td><tr>');
            if(key == 'user_sex'){
                info = data[key] == 0 ? '男' : '女';
                $tr = $('<tr class="'+key+'"><td class="text-r">'+field[key]+'：</td><td>'+info+'</td><tr>');
            }
            else if (key == 'user_city'){
                for(var i = 0; i < City.length; i++){
                    if(City[i]['CityID'] == data[key]){
                        info = City[i]['name'];
                        $tr = $('<tr class="'+key+'"><td class="text-r">'+field[key]+'：</td><td>'+info+'</td><tr>');
                    }
                }
            }
            else if(key == 'user_province'){
                for(var i = 0; i < Province.length; i++){
                    if(Province[i]['ProID'] == data[key]){
                        info = Province[i]['name'];
                        $tr = $('<tr class="'+key+'"><td class="text-r">'+field[key]+'：</td><td>'+info+'</td><tr>');
                    }
                }
            }
            else if(key == 'user_sex_orientation'){
                var datak = data[key];
                info = sexOrientation[datak];
                $tr = $('<tr class="'+key+'"><td class="text-r">'+field[key]+'：</td><td>'+info+'</td><tr>');
            }
            else if(key == 'user_bloodtype'){
                info = data[key] + '型';
                $tr = $('<tr class="'+key+'"><td class="text-r">'+field[key]+'：</td><td>'+info+'</td><tr>');
            }

            else if(key == 'user_sentiment'){
                var datak = data[key];
                info = Sentiment[datak];
                $tr = $('<tr class="'+key+'"><td class="text-r">'+field[key]+'：</td><td>'+info+'</td><tr>');
            }
            $tbody.append($tr);
        }
        $table.append($tbody);
    };

    fillDataInForm = function (data) {
        for(var key in data){

            $('input[type=text][name='+key+']').val(data[key]);



            if(key == 'user_sex'){
                $('input[name=user_sex][value='+data[key]+']').attr('checked',true);
            }



            else if(key == 'user_bloodtype' || key == 'user_sentiment' || key == 'user_sex_orientation'){
                $('select[name='+key+'] option[value='+data[key]+']').attr('selected',true);
            }

            else if(key == 'user_info'){
                $('textarea[name='+key+']').val(data[key]);
            }

            else if(key == 'user_province' || key == 'user_city'){
                $('select[name=user_province] option[value='+data[key]+']').attr('selected',true);
                $province.change();
                if(key == 'user_city'){
                    $('select[name='+key+'] option[value='+data[key]+']').attr('selected',true);
                }
            }


        }
    };

    provinceChange = function (proId) {
        $city.children().remove();
        for(var i = 0; i < City.length; i++){
            if(City[i]['ProID'] == proId){
                var $option = $('<option value="'+City[i]['CityID']+'">'+City[i]['name']+'</option>');
                $city.append($option);
            }
            $city.children().eq(0).attr('selected',true);
        }
    };

    fillProvince = function () {
        for(var i = 0; i < Province.length; i++){
            var $option = $('<option value="'+Province[i]['ProID']+'">'+Province[i]['name']+'</option>');
            $province.append($option);
        }
    };
</script>
<script>
    window.onload = function () {
        window.parent.postMessage(true,window.location.origin);
    };
</script>
</body>
</html>